<template>
        <!-- 运营数据模块 -->
    <div class="bosom">
        <div class="row">
            <div class="vendition">运营数据</div>
            <div class="fatalism align-flex">
                昨天
                <image
                    class="fatalism-dropdown"
                    src="/static/achievement-reports-form/dropdown.png"
                />
            </div>
        </div>
        <div class="box-list align-flex">
            <div class="block-box-i">
                <div class="title">签署份数</div>
                <div class="num">200</div>
            </div>
            <div class="block-box-i block-box-i-left">
                <div class="title">待签署份数</div>
                <div class="num">32</div>
            </div>
        </div>
        <div class="box-list align-flex">
            <div class="block-box-i">
                <div class="title">签署失败份数</div>
                <div class="num">32</div>
            </div>
            <div class="block-box-i block-box-i-left">
                <div class="title">剩余份数</div>
                <div class="num">120</div>
            </div>
        </div>
    </div>
        <!-- 近7日签署趋势 -->
    <div class="bosom">
        <div class="row">
            <div class="vendition">近7日签署趋势</div>
            <div class="jamb align-flex">
                <div class="amount">签署份数</div>
                <div class="sum">待签署</div>
                <div class="sum">签署失败</div>
            </div>
        </div>
        <div class="charts-box">
            <qiun-data-charts
                type="column"
                :opts="opts"
                :chartData="chartData"
            />
        </div>
    </div>
</template>
<script lang="ts" setup>
import uchartsOpts from '@/utils/ucharts'
import { ref } from 'vue'
/* ucharts柱状图操作图表 */
const chartData = ref({})
const opts = {
    color: [
        '#1890FF',
        '#91CB74',
        '#FAC858',
        '#EE6666',
        '#73C0DE',
        '#3CA272',
        '#FC8452',
        '#9A60B4',
        '#ea7ccc',
        '#9EAFFA'
    ],
    padding: [15, 15, 0, 5],
    enableMarkLine: false,
    legend: {
        show: false,
        fontColor: 'red'
    },
    xAxis: {
        axisLine: false,
        disabled: false,
        calibration: false
    },
    yAxis: {
        disableGrid: true,
        splitNumber: 4,
        padding: 30,
        data: [
            {
                min: 0,
                max: 2000,
                axisLine: false,
                fontSize: 14,
                disabled: false,
                showTitle: false,
                titleFontColor: '9497B1',
                fontColor: '#9497B1'
            }
        ]
    },
    extra: {
        column: {
            type: 'group',
            width: 16,
            activeBgColor: '#FFFFFF',
            activeBgOpacity: 0.08,
            seriesGap: 3,
            labelFontColor: '#9497B1'
            // barBorderRadius: [6, 6, 6, 6]
        },
        markLine: {
            data: [
                {
                    value: 21,
                    showLabel: true,
                    labelBgColor: 'red'
                }
            ]
        },
        tooltip: {
            showBox: true
        }
    }
}
// 模拟从服务器获取数据时的延时
setTimeout(() => {
    // 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    const res = {
        categories: [
            '08/16',
            '08/17',
            '08/18',
            '08/19',
            '08/20',
            '08/21',
            '08/22'
        ],
        series: [
            {
                name: '',
                data: [
                    { value: 319, color: '#3E5FF5' },
                    { value: 846, color: '#3E5FF5' },
                    { value: 470, color: '#3E5FF5' },
                    { value: 1365, color: '#3E5FF5' },
                    { value: 1624, color: '#3E5FF5' },
                    { value: 1190, color: '#3E5FF5' },
                    { value: 1877, color: '#3E5FF5' }
                ],
                show: true,
                textColor: '#9EAFFA'
            }
        ]
    }
    chartData.value = JSON.parse(JSON.stringify(res))
}, 500)
</script>